<template>
  <div>
    <el-card class="box-card">
      <el-table :data="details" stripe ref="multipleTable">
        <el-table-column prop="detail_id" label="详单编号"> </el-table-column>
        <el-table-column prop="name" label="奶茶名"> </el-table-column>
        <el-table-column prop="quantity" label="商品数量"> </el-table-column>
        <el-table-column prop="unit_price" label="商品单价"> </el-table-column>
        <el-table-column prop="specification" label="奶茶规格">
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      id: this.data.id,
      details: [],
    };
  },
  created() {
    this.CXList();
  },
  props: {
    dialogFormVisible: Boolean,
    data: Object,
  },
  watch: {
    data: function (newvalue, oldvalue) {
      this.id = newvalue.id;
      this.CXList();
    },
  },
  methods: {
    CXList() {
      console.log("this.data.id: ", this.data.id);
      this.axios({
        method: "get",
        url: "/CX",
        params: { id: this.id },
        data: {},
      })
        .then((res) => {
          console.log("res: ", res);
          this.count = res.data.count;
          this.details = res.data.data;
        })
        .catch((err) => {
          console.log("err: ", err);
        });
    },
  },
};
</script>

<style scoped></style>
